<template>
  <div class="layui-row kgo-show-article-module">
      <iframe :srcdoc="finalDom"></iframe>
  </div>
</template>

<script>
export default {
    props:{
        html:{
             default:"内同"
        },
        codeLanguage:{
            default:'JavaScript'
        }

    },
     data () {
        return {
          finalDom:''

        }
    },
    created(){
     // var article_css_file = '<link rel="stylesheet" href="./static/editor/code/editor.css"/>';
      var prism_css_file = '<link rel="stylesheet" href="./static/editor/code/prism.css"/>';
      var prism_js_file = '<script src="./static/editor/code/prism.js"><\/script>';
      var articleDom  = prism_css_file+prism_js_file+this.html;
      var code_style = 'language-'+this.codeLanguage;
      this.finalDom = articleDom.replace(/<code/, '<code class="'+code_style+'"');
      //console.log(this.finalDom);
    },
   mounted(){


   }
}
</script>

<style lang="scss">
.punctuation{
  color: red;
}
.kgo-show-article-module{
    background-color:#FFFFFF;
    height: auto;
    width: 100%;
}
.kgo-show-article-module .article-title{
    background-color:#FFFFFF;
    height: 60px;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    padding-top: 20px;
    border-bottom: 1px solid #e6e6e6;
}
.kgo-show-article-module iframe{
    border: none;
    height:700px;
    width: 100%;
}
</style>
